<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>电梯维保保险服务包</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexjcsb flexac pl search-box">
          <div>步骤一：选择电梯</div>
          <div class="groupbtn flex m-r-20">
            <el-button class="defaultbtn" type="primary">确定</el-button>
            <el-button class="defaultbtn" type="primary">取消</el-button>
          </div>
        </div>
        <el-table id="dataList" ref="dataList" class="con-table" type="expand" :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck" @select-all="handleCheck" @selection-change="handleCheckChange">
          <el-table-column width="50" type="selection" label="全选" />

          <el-table-column align="center" label="ID">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="注册代码">
            <template slot-scope="scope">
              <span>{{ scope.row.registerCode }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="救援码">
            <template slot-scope="scope">
              <span>{{ scope.row.rescueCode }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="安装地址">
            <template slot-scope="scope">
              <span>{{ scope.row.installAddress }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="电梯类型">
            <template slot-scope="scope">
              <span>曳引驱动乘客与载货电梯</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="使用场所">
            <template slot-scope="scope">
              <span>{{ scope.row.usePlaceName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="使用年限">
            <template slot-scope="scope">
              <span>1年</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain>
                <i class="el-icon-edit" /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div>步骤二：选择维保公司</div>
        </div>
        <div class="con-mian">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="选择维保公司">
              <el-select v-model="form.company" placeholder="维保公司">
                <el-option label="某某某维保公司" :value="0"></el-option>
              </el-select>
              <el-button class="m-l-20" type="primary">招标</el-button>
            </el-form-item>

            <el-form-item label="物联网设备安装">
              <el-radio-group v-model="form.iot">
                <el-radio :label="0">已安装物联网设备</el-radio>
                <el-radio :label="1">未安装物联网设备</el-radio>
              </el-radio-group>
              <span class="m-l-20">维保次数：{{form.iot === 0 ? 12 : 3}}次</span>
              <el-button class="m-l-20" type="primary">安装</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div>步骤三：选择保险公司</div>
        </div>
        <div class="insure">
          <el-form ref="form" :model="form">
            <el-form-item>
              <div class="insure_img">
                <el-image :src="require('@/assets/insurance/tpy.jpg')"></el-image>
                <el-image :src="require('@/assets/insurance/zgpa.jpg')"></el-image>
                <el-image :src="require('@/assets/insurance/zgrm.jpg')"></el-image>
                <el-image :src="require('@/assets/insurance/zgrs.jpg')"></el-image>
              </div>
              <el-radio-group v-model="form.insurance">
                <el-radio :label="0">请选择</el-radio>
                <el-radio :label="1">请选择</el-radio>
                <el-radio :label="2">请选择</el-radio>
                <el-radio :label="3">请选择</el-radio>
              </el-radio-group>
              <el-checkbox-group class="m-t-20" v-model="form.insure">
                <el-checkbox :label="0">安全责任险
                  <el-select size="mini" v-model="form.edition" placeholder="购买版本">
                    <el-option label="基础版" :value="0"></el-option>
                    <el-option label="豪华版" :value="1"></el-option>
                  </el-select>
                </el-checkbox>
                <el-checkbox :label="1">电梯延误险
                  <el-select size="mini" v-model="form.edition" placeholder="购买版本">
                    <el-option label="基础版" :value="0"></el-option>
                    <el-option label="豪华版" :value="1"></el-option>
                  </el-select>
                </el-checkbox>
                <el-checkbox :label="2">电梯损坏险
                  <el-select size="mini" v-model="form.edition" placeholder="购买版本">
                    <el-option label="基础版" :value="0"></el-option>
                    <el-option label="豪华版" :value="1"></el-option>
                  </el-select>
                </el-checkbox>
                <el-checkbox :label="3">电梯老化险
                  <el-select size="mini" v-model="form.edition" placeholder="购买版本">
                    <el-option label="基础版" :value="0"></el-option>
                    <el-option label="豪华版" :value="1"></el-option>
                  </el-select>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="con">
        <div class="con-row flex flexjcsb flexac pl search-box">
          <div>步骤四：生成服务包订单</div>
          <div class="groupbtn flex m-r-20">
            <el-button class="defaultbtn" type="primary">批量生成</el-button>
            <el-button class="defaultbtn" type="primary">生成订单</el-button>
          </div>
        </div>
        <div class="con-mian">
          <el-table show-summary class="con-table" type="expand" :data="incureData" >
            <!-- <el-table-column width="50" type="selection" label="全选" /> -->

            <el-table-column align="center" label="ID" prop="id"></el-table-column>

            <el-table-column align="center" label="电梯编号">
              <template slot-scope="scope">
                {{ scope.row.code }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="电梯类型" prop="type"></el-table-column>

            <el-table-column align="center" label="维保公司" prop="maintenanceUnitName"></el-table-column>

            <el-table-column align="center" label="维保次数">
              <template slot-scope="scope">
                {{ scope.row.maintenanceNum }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="价格">
              <template slot-scope="scope">
                {{ scope.row.price }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="保险公司" prop="insure"></el-table-column>

            <el-table-column align="center" label="安全责任险">
              <template slot-scope="scope">
                {{ scope.row.safety }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="电梯延误险">
              <template slot-scope="scope">
                {{ scope.row.delay }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="电梯损坏险">
              <template slot-scope="scope">
                {{ scope.row.damage }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="小计" prop="subtotal"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { elevatorQueryList } from '@/api/elevator/elevator'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'elevatorInsureOnline',
  props: {},
  data() {
    return {
      incureData:[
        {
          id:1,
          code:'32104112002011060021',
          type:'曳引驱动乘客与载货电梯',
          maintenanceUnitName:'某某维保公司',
          maintenanceNum:12,
          price:3000,
          insure:'中国平安',
          safety:'120',
          delay:'300',
          damage:'500',
          subtotal:3920
        },
        {
          id:2,
          code:'32104112002011060022',
          type:'曳引驱动乘客与载货电梯',
          maintenanceUnitName:'某某维保公司',
          maintenanceNum:12,
          price:3000,
          insure:'中国平安',
          safety:'160',
          delay:'300',
          damage:'500',
          subtotal:3960
        }
      ],
      form: {
        company: '',
        iot: 1,
        insurance: '',
        insure: [],
        edition: ''
      },
      delPro: '',
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },

      dataList: [],
      queryParam: {
        name: '',
        id: ''
      },
      visible: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSystemList()
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/intelligentVillage/elevatorInsure/elevatorInsureOnline/index' }))
  },
  methods: {
    handleCheck(selection, row) {
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.delPro = row
      }
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    getSystemList() {
      const params = ['3', '', '', this.paging.currentPage, this.paging.pageSize, '', '', '', '']
      elevatorQueryList(...params).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSystemList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getSystemList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/public.scss";
.insure {
  padding: 20px;
}
.insure .el-radio {
  width: 150px;
  text-align: center;
  margin-top: 20px;
  margin-right: 40px;
}
.insure_img {
  display: flex;
}
.insure_img > * {
  width: 150px;
  height: 150px;
  margin-right: 40px;
}
.con-mian {
  padding: 20px 10px;
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>


